<template>
  <div class="app-container">
    <Find :OriginalFilter="{ static: true }" :formList="formList" @findClicked="findClicked" />

    <div style="margin-top: 10px" class="Main">
      <el-card class="MainCard" shadow="always" :body-style="{ padding: '10' }">
        <!-- card body -->
        <div class="MainCardDiv">
          <div class="MainCardLeft">
            <div class="MainCardDivMain">
              <el-tree :data="data" node-key="所有数据" :props="defaultProps" @node-click="handleNodeClick" />
            </div>
          </div>
          <div class="MainCardRight">
            <div>
              <h1>系统程序资料</h1>
              <Table :tableHeader="tableHeader" :tableData="tableData1" :TableHeight="95" />
            </div>
            <div style="margin-left: 10px">
              <h1>授权用户</h1>
              <Table :tableHeader="tableHeader1" :tableData="tableData1" :TableHeight="95" />
            </div>
          </div>
        </div>
        <PageModule :PageData="{ pageSizeShow: true }" />
      </el-card>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'ProgramManagement'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
import { ref, onMounted } from 'vue'

const formList = ref([
  {
    type: 'select',
    selectValue: '',
    selectP: '系统名称',
    selectLabel: '',
    selectOptions: []
  }
])

const findClicked = () => {}

const tableHeader = ref([
  {
    label: '程序代码',
    prop: 'slipNo'
  },
  {
    label: '程序名称',
    prop: 'slipDate'
  },
  {
    label: '程序名',
    prop: 'dutyDeptName'
  },
  {
    label: '功能',
    prop: 'sysUser'
  },
  {
    label: '操作简介',
    prop: 'name'
  },
  {
    label: '父级程序',
    prop: 'name'
  }
])

const tableHeader1 = ref([
  {
    label: '公司',
    prop: 'slipNo'
  },
  {
    label: '职务',
    prop: 'slipDate'
  },
  {
    label: '用户代码',
    prop: 'dutyDeptName'
  },
  {
    label: '功能',
    prop: 'sysUser'
  }
])

const tableData1 = [
  {
    date: '20230427',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  }
]

//获取所有部门资料
onMounted(() => {})

interface Tree {
  label: string
  children?: Tree[]
  deptName?: string
  deptNo?: string
  deptFlag?: string
  totalFlag?: string
}

const data = ref([])

// 部门代码
const DepartmentCode = ref<string>('')

// 部门资料
const DepartmentalDat = ref<string>('')

// 定义结构
interface Department {
  id: string
  name: string
}

// 部门类型
const DepartmentType = ref<Department[]>([
  { id: 'P', name: '生产部门' },
  { id: 'M', name: '幕僚部门' }
])

// 核算类型
const AccountingType = ref<Department[]>([
  { id: 'Y', name: '成本核算部门' },
  { id: 'N', name: '非成本核算部门' }
])

const handleNodeClick = (data: Tree) => {
  // 解构代码和资料
  let { deptName, deptNo, deptFlag, totalFlag } = data

  DepartmentCode.value = deptName!
  DepartmentalDat.value = deptNo!

  let departmentName = findNameById(DepartmentType.value, deptFlag!)
  department.value = departmentName

  let accountingName = findNameById(AccountingType.value, totalFlag!)
  businessAccounting.value = accountingName
}

// 根据 id 在数组中查找对应的名称
const findNameById = (array: { id: string; name: string }[], id: string) => {
  let item = array.find((item) => item.id === id)
  return item ? item.name : ''
}

// 生产
const defaultProps = {
  children: 'childDepartment',
  label: 'deptName'
}

// 收集部门类型数据
const department = ref<string>('')

// 收集核算部门数据类型
const businessAccounting = ref<string>('')
</script>

<style lang="less" scoped>
.MainCard {
  width: 100%;
  height: 100%;
  box-shadow: none;
}

.MainCardDiv {
  width: 50%;
  display: flex;

  .MainCardLeft {
    width: 50%;
  }

  .MainCardRight {
    width: 48%;
    margin-left: 20px;
    margin-top: px;
    display: flex;
  }
}

.MainCardLeftH1 {
  font-size: 16px;
  margin-top: 15px;
  margin-left: 10px;
  margin-bottom: 15px;
}

.MainCardDivMain {
  width: 100%;
  height: 92%;
  border: 1px solid #e6e6e6;
  margin-left: 10px;
}

:deep(.el-tree-node:focus > .el-tree-node__content) {
  color: #f89027;
}

:deep(.el-tree-node__content:hover) {
  color: #f89027;
}

:deep(.is-expanded > .el-tree-node__content > .el-tree-node__expand-icon) {
  color: red !important;
}

.MainCardRightTop {
  height: 57%;
  width: 100%;
  padding-top: 80px;
}

.MainCardRightBottom {
  height: 40%;
  width: 100%;
}

.MainCardRightH1 {
  font-size: 16px;
  margin-bottom: 30px;
}

:deep(.el-select .el-input__wrapper) {
  width: 180px;
}

h1 {
  font-size: 16px;
}
</style>
